"use client"

import * as React from "react"
import { TrendingUp } from "lucide-react"
import { CartesianGrid, Line, LineChart, Pie, PieChart, XAxis } from "recharts"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

const lineData = [
  { month: "一月", value: 186 },
  { month: "三月", value: 237 },
  { month: "六月", value: 214 },
]

const pieData = [
  { name: "Chrome", value: 275 },
  { name: "Safari", value: 200 },
  { name: "Firefox", value: 287 },
]

const chartConfig = {
  line: {
    label: "访问量",
    color: "hsl(var(--chart-1))",
  },
  pie: {
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig

export function LineChart1() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>访问趋势</CardTitle>
        <CardDescription>2024年季度数据</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart data={lineData} margin={{ left: 10, right: 10 }}>
            <CartesianGrid vertical={false} />
            <XAxis dataKey="month" tickLine={false} axisLine={false} />
            <ChartTooltip content={<ChartTooltipContent />} />
            <Line dataKey="value" stroke="var(--color-line)" strokeWidth={2} />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

export function PieChart1() {
  const total = React.useMemo(() => pieData.reduce((sum, item) => sum + item.value, 0), [])
  
  return (
    <Card>
      <CardHeader>
        <CardTitle>浏览器分布</CardTitle>
        <CardDescription>总访问量: {total}</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <PieChart>
            <Pie data={pieData} dataKey="value" nameKey="name" innerRadius={60} />
            <ChartTooltip />
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
} 